<template>
  <div class="environment-map-container">
    <!-- 地图容器 -->
    <EnvironmentMap ref="mapRef" @map-loaded="handleMapLoaded" @layer-click="handleLayerClick" />

    <!-- 左侧按钮组件 -->
    <LeftSideButton />

    <Popup v-model:show="showPopup" position="bottom" closeable :style="popupStyle" :safe-area-inset-bottom="true">
      <WaterQualityPopup
        v-if="layerId === 'guokongzhan' || layerId === 'shengkongzhan' || layerId === 'shikongzhan' || layerId === 'xiankongzhan'"
        :feature-id="featureId" />
      <shougongduanmianPopup v-else-if="layerId === 'shougongduanmian'" :feature-id="featureId" />
      <shuiyuandiPopup v-else-if="layerId === 'shuiyuandiStation'" :feature-id="featureId":feature-data="featureData" />
      <qushuikouPopup v-else-if="layerId === 'qushuikou'" :feature-id="featureId" :feature-data="featureData" />
      <PollutionSourcePopup v-else-if="layerId === 'wuranyuan'" :feature-data="featureData" />
      <RehepaiwukouPopup v-else-if="layerId === 'ruhepaiwukou'" :feature-data="featureData" />
      <!-- <div class="station-info">
        <Button type="primary" block @click="showPopup = false">关闭</Button>
      </div> -->
    </Popup>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, computed } from 'vue'
import { Button, Popup } from 'vant'
import EnvironmentMap from './EnvironmentMap.vue'
import LeftSideButton from './LeftSideButton.vue'

import WaterQualityPopup from './popup/WaterQualityPopup.vue'
import shougongduanmianPopup from './popup/shougongduanmianPopup.vue'
import shuiyuandiPopup from './popup/shuiyuandiPopup.vue'
import qushuikouPopup from './popup/qushuikouPopup.vue'
import PollutionSourcePopup from './popup/PollutionSourcePopup.vue'
import RehepaiwukouPopup from './popup/RuhepaiwukouPopup.vue'

const closeable = ref(true)
// 地图引用
const mapRef = ref(null)
const mapInstance = ref(null)
// 菜单控制
const showPopup = ref(false)
const layerId = ref('')
const featureId = ref('')
const featureData = ref({})

// 计算弹出框样式，移动端适配
const popupStyle = computed(() => {
  // 移动端使用动态高度
  if (window.innerWidth <= 768) {
    if (layerId.value === 'shuiyuandiStation') {
      return {
        height: '80%',
        maxHeight: 'calc(100vh - 100px)'
      }
    }
    return {
      height: '80%',
      maxHeight: 'calc(100vh - 100px)'
    }
  }
  return {
    height: '500px'
  }
})

function handleLayerClick(lyid, fid, data) {
  layerId.value = lyid
  featureId.value = fid
  featureData.value = data
  showPopup.value = true
}

onMounted(() => {
})

onUnmounted(() => {

})

// 处理地图加载完成事件
function handleMapLoaded(map) {
  mapInstance.value = map
}

</script>

<style scoped>
.environment-map-container {
  width: 100dvw;
  height: 100dvh;
  position: relative;
  overflow: hidden;
}

.station-info {
  padding: 20px;
  text-align: center;
}

.station-info h3 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: bold;
}

.station-info p {
  margin: 8px 0;
  color: #666;
}

/* 消息通知样式 */
.message-notification {
  position: absolute;
  top: 20px;
  right: 20px;
  background-color: rgba(25, 137, 250, 0.9);
  color: white;
  padding: 15px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-width: 300px;
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }

  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 移动端适配 */
@media screen and (max-width: 768px) {
  .environment-map-container {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
  }

  .message-notification {
    top: 10px;
    right: 10px;
    left: 10px;
    max-width: none;
    padding: 12px 15px;
    font-size: 14px;
  }
}
</style>